<template>
    <div class="kuang">
        <div class="div-background">
            <div v-for="(item,index) in peopleList" class="div-small"  >
                <img v-if="item.headImageUrl===null||item.headImageUrl===''" @click="selectHead(index)" class="head-img" src="../assets/examinedefault.png">
                <img v-else @click="selectHead(index)" class="head-img" :src="qn_domain+item.headImageUrl">

                <p style="color: #5a5a5a;text-align: center;" >{{item.name}}</p>

            </div>
        </div>
    </div>
</template>

<script>
    import {userInfoData,qn_domain} from '../globalVariables'

    export default {
        name: "examineAlertComponent",
        data() {
            return {
                selectIndex:0,
                qn_domain:'',

            };
        },
        props: {
            peopleList: {
                type: Array,
                default() {
                    return []
                }
            },


        },
        created(){
            this.qn_domain = localStorage.getItem(qn_domain);

        },
        methods:{
            selectHead(index)
            {
                this.selectIndex=index;
                this.$emit('selectHead',this.peopleList[this.selectIndex]); //主动触发selectHead方法，'123'为向父组件传递的数据

            },

        },
    }

</script>

<style scoped>
    .kuang
    {
        height: 100%;
        background-color: white;
        padding-left: 20px;
        padding-right: 20px;
    }
    .div-background
    {
        border: 1px solid #e5e5e5;
        height: 85%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: scroll;

    }
    .div-small
    {
        width: 25%;
    }
    .head-img
    {
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 0.55rem;
        margin-top: 0.2rem;
        margin-right: 0.8rem;
        margin-left: 0.2rem;
    }

</style>